<template>
	<view>
		<uni-byt-top-com title="多选树形弹窗" :backShow="backShow"></uni-byt-top-com>
		<scroll-view scroll-y="true" :style="{height:scrollHeight+'px'}">
			<view class="flex-col my-14 mx-15">
				<view class="flex-col my-14">
					<text class="text-size-16">多选树形弹窗：</text>
					<text class="text-size-16 text-ti mt-16">selectList:{{JSON.stringify(selectList)}}</text>
					<text class="text-size-16 text-ti mt-16">checkedList:{{JSON.stringify(checkedList)}}</text>
				</view>
				<view class="flex-row">
					<u-button @click="treeShow=true" type="warning">打开弹窗</u-button>
				</view>

				<uni-byt-checkbox-tree ref="xyTree" :show.sync="treeShow" title="弹窗示例" height="60vh"
					checkColor="#22a6f1" :treeData="targetList" :replaceFields="typeObjs"
					:defaultCheckedList="checkedList" :defaultCheckedKeys="selectList" :defaultOpenedKeys="selectList"
					@checkChange="treeChecked">
				</uni-byt-checkbox-tree>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getHeight
	} from "@/util"
	export default {
		data() {
			return {
				scrollHeight: getHeight(),
				backShow: false,

				// 打开弹窗
				treeShow: false,
				// 传递关键字段
				typeObjs: {
					children: 'children',
					// id
					key: 'id',
					// 名称
					name: 'name',
					// 头像
					avatar: "src"
				},
				// 数据
				targetList: [{
						id: 1,
						name: '你好',
						src: "https://tse1-mm.cn.bing.net/th/id/OIP-C.PobTVuzuQy7tAZtvVEc3VQAAAA?rs=1&pid=ImgDetMain",
						children: [{
							id: 2,
							src: "https://tse1-mm.cn.bing.net/th/id/OIP-C.PobTVuzuQy7tAZtvVEc3VQAAAA?rs=1&pid=ImgDetMain",
							name: '你好2'
						}]
					},
					{
						id: 3,
						name: '你好好',
						src: "https://tse1-mm.cn.bing.net/th/id/OIP-C.PobTVuzuQy7tAZtvVEc3VQAAAA?rs=1&pid=ImgDetMain",
						children: []
					},
					{
						id: 4,
						name: '你好',
						children: [{
							id: 5,
							name: '你好2'
						}]
					},
					{
						id: 6,
						name: '你好好',
						children: []
					},
				],
				// 已选择对象的名称和id组
				checkedList: [],
				// 已选择对象id组
				selectList: [],

			}
		},
		onLoad(play) {
			if (play.backShow) {
				if (play.backShow == '1') {
					this.backShow = true
				}
			}
		},
		methods: {
			// 选择树
			treeChecked(e, checked, checkedKeyList, checkedList) {
				console.log("名称id数组：", checkedList);
				console.log("选择的是", e, checked, checkedKeyList)
				this.selectList = checkedKeyList
				this.checkedList = checkedList
			},
		}
	}
</script>

<style>

</style>